<!doctype html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!--这meta的作用就是删除默认的苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--网站开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!--移动web页面是否自动探测电话号码-->
    <meta http-equiv="x-rim-auto-match" content="none">
    <!--移动端版本兼容 start -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <!--移动端版本兼容 end -->
    <title>支付宝扫码支付</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" th:href="@{/img/favicon.png}">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" th:href="@{/img/app-icon72x72@2x.png}">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{/img/app-icon72x72@2x.png}">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" th:content="@{/img/app-icon72x72@2x.png}">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" th:href="@{/css/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/css/wx.css}">
    <meta name="__hash__" content="a7f55f8c2998c0e892ee07994c6c48a6_95641af55d8ce035f4603db35383c232e"/>
</head>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/qrcode.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<body>
<style>
    .qrcodeImg img {
        display: inline !important;
    }
</style>
<header class="alipay">
    <h1><a href="#" class="am-text-ir am-center">支付宝支付</a></h1>
</header>
<div class="am-g am-g-fixed am-margin-vertical wx-box">


    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center"><p class="am-text-xxxl"
                                                                                            th:text="'￥' + ${channelOrder.amount}"></p>
    </div>
    <div id="img" style="font-size: 25px;color: red"></div>
    <div class="am-text-center" th:text="'支付订单号：' + ${channelOrder.childOrderno}"></div>
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">

        <div style="color: red; font-size: 25px;background-color: #e4dfdf;">
            本系统会随机减几分钱,请放心支付.请勿修改付款金额.
        </div>
        <div id="timeout"></div>
        <div class="tps_btn" style="padding-top: 10px;">
            <a id="clipUrl" data-clipboard-text=""
               style="cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">点击复制付款链接</a>
            <div id="clipSuccess" style="display: none;color: red">复制成功</div>
        </div>

        <div class="" style="color: red;text-align: left;">
            <div>1.点击复制付款链接</div>
            <div>2.请打开支付将此链接发送给任意好友</div>
            <div>3.点击发送的链接地址,完成支付</div>
            <div>5.如果有另外一部手机扫码,请点击下面的[扫码付款]</div>
        </div>
        <div class="tps_btn" style="padding-top: 10px;">
            <a href="javascript:;" onclick="goPc()"
               style="cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">扫码付款</a>
        </div>
        <img class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center" th:src="@{/img/guid/yangtu2.jpg}"/>
    </div>
</div>
</div>

<script th:inline="javascript">
    var orderId =  [[${channelOrder.orderId}]];
    function goPc(){
        window.location.href = orderId+"?clientType=pc";
    }

    // {#dates.format(successTime, 'yyyy-MM-dd HH:mm:ss')
    var createTimeStr = [[${#calendars.format(channelOrder.createTime,'yyyy-MM-dd HH:mm:ss')}]]
    var createTime = new Date(createTimeStr)

    function clock() {
        var today = new Date(),//当前时间
            h = today.getHours(),
            m = today.getMinutes(),
            s = today.getSeconds();
        var stopTime = new Date(createTime.getTime() + 5 * 60 * 1000),//结束时间
            stopH = stopTime.getHours(),
            stopM = stopTime.getMinutes(),
            stopS = stopTime.getSeconds();
        var shenyu = stopTime.getTime() - today.getTime(),//倒计时毫秒数
            shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)),//转换为天
            D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000),//除去天的毫秒数
            shengyuH = parseInt(D / (60 * 60 * 1000)),//除去天的毫秒数转换成小时
            H = D - shengyuH * 60 * 60 * 1000,//除去天、小时的毫秒数
            shengyuM = parseInt(H / (60 * 1000)),//除去天的毫秒数转换成分钟
            M = H - shengyuM * 60 * 1000;//除去天、小时、分的毫秒数
        var S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)//除去天、小时、分的毫秒数转化为秒
        if (shengyuH <= 0 && shengyuM <= 0 && S <= 0) {
            shengyuH = 0;
            shengyuM = 0;
            S = 0;
        }
        document.getElementById("timeout").innerHTML = ("剩余支付时间" + shengyuH + "小时" + shengyuM + "分" + S + "秒" + "<br>");
        // setTimeout("clock()",500);
        if (shengyuH <= 0 && shengyuM <= 0 && S <= 0) {
            return;
        }
        setTimeout(clock, 1000);
    }

    clock();

    // data-clipboard-text="${clipUrl}"
    var clipUrl = [[${clipUrl}]];
    var amount = [[${channelOrder.amount}]];

    $("#clipUrl").attr("data-clipboard-text", "实付金额: ¥"+amount+" [点击付款===>]  " +  clipUrl);// 设置
    // http://dwz.wailian.work/api.php?from=w&url=aHR0cDovL2dhcGlsYW4uY24vcGF5L3RoaXJkL2Q2ZTRjZDE5N2VkNDExZTk4Njc2MDAxNjNlMTBjMDY4&site=sina
    // var url = " http://t.im/?url=" + encodeURIComponent(clipUrl) + "&title=&expiration="
    // var url ="http://h5ip.cn/index/api?format=json&url=" + encodeURIComponent(clipUrl)
    // http://t.im/?url=http%3A%2F%2F47.110.231.165%2Fpay%2Falipay%3ForderId%3Dd6e4cd197ed411e9867600163e10c068&keyword=&title=&expiration=

    var clipboard = new ClipboardJS('#clipUrl');

    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
        $("#clipSuccess").show();
        setTimeout(function () {
            $("#clipSuccess").hide();
        }, 3000)
    });

    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

    if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#phoneBtn').hide();
    }
    var qrcodeStr = [[${qrcode}]];
    if (qrcodeStr == 'success') {
        $('#img').html('<div style="color: red;font-size: 25px;">订单已成功!</div>')
    } else {
        // 定时器
        var interval = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.successTime) {
                    window.clearInterval(interval);
                    $('#img').html('<div style="color: red;font-size: 25px;">支付成功!</div>')
                    // 跳转地址
                } else if (data.data.orderStatus == '4') {
                    window.clearInterval(interval);
                    $('#img').html('<div style="color: red;font-size: 25px;">订单超时!</div>')
                    // 跳转地址
                }
            })
        }, 5000)
    }
</script>
</body>
</html>